<script lang="ts" setup>
import { computed, onMounted, ref } from 'vue';

interface Props {
	visible?: boolean;
	position?: string;
}

const safeBottom = ref(0);

onMounted(() => {
	const windowInfo = uni.getWindowInfo();
	safeBottom.value = windowInfo.safeAreaInsets.bottom;
});

const props = withDefaults(defineProps<Props>(), {
	position: 'bottom'
});
const emit = defineEmits(['cancel']);

const classNames = computed(() => {
	const list = [];
	if (props.position) {
		list.push(`x-popup-position-${props.position}`);
	}
	return list;
});

const contentStyle = computed(() => {
	if (props.position === 'bottom') {
		return {
			paddingBottom: safeBottom.value + 'rpx'
		};
	}
	return {};
});
</script>

<template>
	<view class="x-popup" :class="classNames" v-if="visible">
		<view class="x-popup-mask" @tap="emit('cancel')"></view>
		<view class="x-popup-content" :style="contentStyle">
			<slot></slot>
		</view>
	</view>
</template>

<style lang="scss" scoped>
.x-popup {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 999;

	&-mask {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 1000;
		background-color: rgba(0, 0, 0, 0.5);
	}

	&-content {
		position: fixed;
		width: 100%;
		z-index: 1001;
		background-color: #fff;
		padding: 32rpx;
		border-radius: 20rpx 20rpx 0 0;
		box-sizing: border-box;
	}

	&-position-bottom {
		.x-popup-content {
			bottom: 0;
			left: 0;
		}
	}

	&-position-center {
		.x-popup-content {
			top: 50%;
			left: 50%;
			width: 80%;
			transform: translate(-50%, -50%);
			border-radius: 16rpx;
		}
	}
}
</style>
